.code-copy {
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-family: Fira Mono;
  background-color: #191919;
  border-radius: 4px;
  overflow: hidden;
  font-size: 20px;

  display: flex;

  &-symbol {
    padding: 0 16px;
  }

  &-content {
    :global(.token-package) {
      color: #A6D8FF;
    }
  }

  &-btn {
    margin-left: auto;
    width: 50px;
    border-left: 1px solid #3B3B3D;
    text-align: center;
    cursor: pointer;
    transition: var(--home-transition-base);

    &:hover,
    &-success {
      background-color: rgb(var(--primary-6));
      border-left-color: rgb(var(--primary-6));
    }
  }
}

body[arco-theme="dark"] {
  .code-copy {
    background-color: #484849;
    border: 1px solid #3B3B3D;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 768px) {
  .code-copy {
    height: 44px;
    line-height: 44px;
    font-size: 12px;
  }
}
